<template>
  <view>
    <view class="goods-list">
      <view v-for="(item,i) in goodsList" :key='i' @click="gotoDetail(item)">
        <!-- 为my-goods组件动态绑定goods属性的值 -->
        <my-goods :goods="item"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //请求参数对象
        queryObj:{
          //查询关键词
          query:"",
          //商品分类ID
          cid:'',
          //页码值
          pagenum:1,
          //每页显示多少条数据
          pagesize:10
        },
        //商品列表的数据
        goodsList:[],
        //总数量，用来实现分页
        total:0,
        //默认的空图片
        defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        //节流阀 用节流阀防止发起额外的请求
        isloading:false
      };
    },
    onLoad(options){
      //将页面参数转存到this.queryObj对象中
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid||''
      this.getGoodsList()
    },
    methods:{
      //获取商品列表数据的方法
      async getGoodsList(cb){
        //打开节流阀
        this.isloading = true
        // const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        const res = {"message":{"total":57445,"pagenum":1,"goods":[{"goods_id":57445,"cat_id":9,"goods_name":"创维（Skyworth）65V9E 65英寸25核4K HDR高清智能电视","goods_price":6499,"goods_number":100,"goods_weight":100,"goods_big_logo":"","goods_small_logo":"","add_time":1516663280,"upd_time":1516663280,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57444,"cat_id":9,"goods_name":"创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）","goods_price":1899,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg","goods_small_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg","add_time":1516663280,"upd_time":1516663280,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57443,"cat_id":9,"goods_name":"创维(Skyworth) 65M6E 65英寸 4K超高清智能酷开网络液晶电视","goods_price":4999,"goods_number":100,"goods_weight":100,"goods_big_logo":"","goods_small_logo":"","add_time":1516663280,"upd_time":1516663280,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57442,"cat_id":9,"goods_name":"创维彩电40G6A","goods_price":2999,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg","goods_small_logo":"http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg","add_time":1516663277,"upd_time":1516663277,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57441,"cat_id":9,"goods_name":"创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)","goods_price":9699,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg","goods_small_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg","add_time":1516663273,"upd_time":1516663273,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57440,"cat_id":9,"goods_name":"创维彩电55G3","goods_price":4699,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_800x800.jpg","goods_small_logo":"http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_400x400.jpg","add_time":1516663269,"upd_time":1516663269,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57439,"cat_id":9,"goods_name":"创维电视55G720S 55英寸4色4K 23核智能彩电网络液晶平板电视","goods_price":4999,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_800x800.jpg","goods_small_logo":"http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_400x400.jpg","add_time":1516663265,"upd_time":1516663265,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57438,"cat_id":9,"goods_name":"创维（Skyworth）55H9A 55英寸超薄 全面屏 4K超高清智能电视(黑色)","goods_price":3999,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_800x800.jpg","goods_small_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_400x400.jpg","add_time":1516663261,"upd_time":1516663261,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57437,"cat_id":9,"goods_name":"创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色","goods_price":3099,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_800x800.jpg","goods_small_logo":"http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_400x400.jpg","add_time":1516663258,"upd_time":1516663258,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57436,"cat_id":9,"goods_name":"创维(Skyworth) 43M9 43英寸 4K超高清智能网络LED液晶平板电视","goods_price":2399,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_800x800.jpg","goods_small_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_400x400.jpg","add_time":1516663255,"upd_time":1516663255,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57435,"cat_id":9,"goods_name":"创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 50G7 (50英寸)","goods_price":4999,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_800x800.jpg","goods_small_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_400x400.jpg","add_time":1516663249,"upd_time":1516663249,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57434,"cat_id":9,"goods_name":"创维（Skyworth）60V8E 60英寸 4色4K 21核金属机身超高清智能网络液晶电视（金色）","goods_price":4499,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_800x800.jpg","goods_small_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_400x400.jpg","add_time":1516663246,"upd_time":1516663246,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57433,"cat_id":9,"goods_name":"创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视","goods_price":3299,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg","goods_small_logo":"http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg","add_time":1516663242,"upd_time":1516663242,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57432,"cat_id":9,"goods_name":"创维(Skyworth) 58V6 58英寸 4K超高清智能网络LED液晶平板电视","goods_price":3299,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_800x800.jpg","goods_small_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_400x400.jpg","add_time":1516663239,"upd_time":1516663239,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57431,"cat_id":9,"goods_name":"创维（Skyworth）55E5 55吋4K超高清智能电视","goods_price":2956,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_800x800.jpg","goods_small_logo":"http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_400x400.jpg","add_time":1516663236,"upd_time":1516663236,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57430,"cat_id":9,"goods_name":"创维（Skyworth）65M9 65英寸15核HDR 4K超高清智能电视","goods_price":0,"goods_number":100,"goods_weight":100,"goods_big_logo":"","goods_small_logo":"","add_time":1516663233,"upd_time":1516663233,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57429,"cat_id":9,"goods_name":"创维（Skyworth）50M9 50英寸15核HDR 4K超高清智能电视","goods_price":2603,"goods_number":100,"goods_weight":100,"goods_big_logo":"","goods_small_logo":"","add_time":1516663213,"upd_time":1516663213,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57428,"cat_id":9,"goods_name":"创维.PPTV W42S 42英寸 全高清智能网络LED液晶平板电视","goods_price":1799,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_800x800.jpg","goods_small_logo":"http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_400x400.jpg","add_time":1516663210,"upd_time":1516663210,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57427,"cat_id":9,"goods_name":"创维(Skyworth) 32X6 32英寸 高清智能网络LED液晶平板电视","goods_price":1201,"goods_number":100,"goods_weight":100,"goods_big_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_800x800.jpg","goods_small_logo":"http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_400x400.jpg","add_time":1516663203,"upd_time":1516663203,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9},{"goods_id":57426,"cat_id":9,"goods_name":"创维（Skyworth）55M9 55英寸15核HDR 4K超高清智能电视M7","goods_price":2999,"goods_number":100,"goods_weight":100,"goods_big_logo":"","goods_small_logo":"","add_time":1516663200,"upd_time":1516663200,"hot_mumber":0,"is_promote":false,"cat_one_id":1,"cat_two_id":3,"cat_three_id":9}]},"meta":{"msg":"获取成功","status":200}};
        //关闭节流阀
        this.isloading = false
        //只要数据请求完毕，就立即按需调用cb回调函数
        cb &&cb()   //若cb存在就调用
        if(res.meta.status !==200){
          return uni.$showMsg()
        }
        console.log(res);
        this.goodsList = [...this.goodsList,...res.message.goods];
        this.total = res.message.total
      },
      gotoDetail(item){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      }
    
    },
    //上拉触底事件函数
    onReachBottom(){
      //判断是否还有下一页数据
      if(this.queryObj.pagenum*this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！');
      //判断此时是否正在请求其他数据，如果是，则不发起额外的请求，通过节流阀来完成
      if(this.isloading) return;
      
      //让页码值++1
      this.queryObj.pagenum +=1;
      //重新获取列表数据
      this.getGoodsList()
    },
    //下拉刷新的事件
    onPullDownRefresh(){
      //1.重置关键数据
      this.queryObj.pagenum =1;
      this.total =0;
      this.isloading=false;
      this.goodsList = []
      
      //2.重新发起请求
      this.getGoodsList(()=>uni.stopPullDownRefresh())  //请求数据完毕之后关闭下拉刷新函数
    }
  }
</script>

<style lang="scss">

</style>
